@import "./variables.less";

.shadow--2dp {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 
              0 3px 1px -2px rgba(0, 0, 0, 0.2), 
              0 1px 5px 0 rgba(0, 0, 0, 0.12); 
}

input.textfield {
  background-color: transparent;
  border: 1px solid @blue-grey-700;
  padding: 5px 10px;
  border-radius: 2px;
}

button {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 1em;

  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
  -webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7'
}

div.picturama-outer-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 20;  // Show above .App-mainView

  div.picturama-modal {
    width: 400px;
    height: @sidebarWidth;
    background-color: @blue-grey-100;
    color: @blue-grey-900;
    position: absolute;
    top: 25%;
    left: 31%;
    border-radius: 2px;
    padding: 10px 15px;
  }
}

    /* create a full-height inline block pseudo=element */
    div.picture-diff div.before:before, 
    div.picture-diff div.after:before { 
      content: ' ';
      display: inline-block;
      vertical-align: middle;  /* vertical alignment of the inline element */
      height: 100%;
    }

    div.picture-diff {
      width: 100%;
      height: ~"calc(100% - 26px)";
      margin: 0 auto;
      position: relative;

      div.v-align {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        height: 97%;
        margin-top: 3%;

        img {
          display: block;
          max-width: 90%;
          max-height: 90%;
          width: auto;
          height: auto;
          margin: auto;
        }

      }

      div.picture-info {
        position: absolute;
        bottom: -26px;
        left: 0;
        width: 100%;
      }
    }

    div.picture-diff {
      height: 100%;

      div.before, div.after {
        position: relative;
        width: 50%;
        height: 25%;
        margin-top: 0;

        h3 {
          position: absolute; 
          width: 100%;
          text-align: center;
          top: 0;
          left: 0;
          color: @blue-grey-700;
        }

        img { max-height: none; }
      }
    }

#progress {
  color: @blue-grey-900;
  text-align: center;
  margin: 10px 15px;

  div.progress-bar {
    width: 100%;
    height: 60px;
    background: @white;
    border: 1px solid #bbb;
    border-radius: 2px;

    div.progress-value {
      width: 0;
      height: 60px;
      background: @teal-500;
    }
  }
}

#splash {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: @blue-grey-800;

  h1 {
    font-family: 'Roboto Mono';
    color: @blue-grey-100;
    font-size: 2em;
    position: absolute;
    top: 40%;
    text-align: center;
    width: 100%;
  }
}
